<template>
  <div
    class="blog-list-container"
    @scroll="handleScroll"
    ref="container"
    v-loading="isLoading"
  >
    <ul class="blog-box">
      <li v-for="item in data.rows" :key="item.id" class="blog">
        <div v-if="item.thumb" class="thumb">
          <RouterLink
            :to="{
              name: 'blogDetail',
              params: {
                blogId: item.id,
              },
            }"
            ><img :alt="item.title" v-lazy="item.thumb"
          /></RouterLink>
        </div>
        <div class="main">
          <RouterLink
            :to="{
              name: 'blogDetail',
              params: {
                blogId: item.id,
              },
            }"
            ><h2 class="title">{{ item.title }}</h2></RouterLink
          >
          <div class="aside">
            <span class="date">日期：{{ formatDate(item.createDate) }}</span>
            <span class="scan">浏览：{{ item.scanNumber }}</span>
            <span class="comment">评论：{{ item.commentNumber }}</span>
            <span class="category"
              ><RouterLink
                :to="{
                  name: 'blogCategory',
                  query: {
                    page: routeInfo.page,
                    limit: routeInfo.limit,
                  },
                  params: {
                    categoryId: item.category.id,
                  },
                }"
                >{{ item.category.name }}</RouterLink
              ></span
            >
          </div>
          <RouterLink
            :to="{
              name: 'blogDetail',
              params: {
                blogId: item.id,
              },
            }"
            ><div class="content">{{ item.description }}</div></RouterLink
          >
        </div>
      </li>
    </ul>
    <Empty v-if="!isLoading && !data.total" />
    <Pager
      v-if="!isLoading && data.total"
      :current="routeInfo.page"
      :limit="routeInfo.limit"
      :total="data.total"
      @pageChange="handlePageChange"
      :visibleNumber="visibleNumber"
    />
  </div>
</template>

<script>
import formatDate from "../utils/formatDate.js";
import { getBlogs } from "../api/blog.js";
import Pager from "../components/Pager.vue";
import Empty from "../components/Empty.vue";

export default {
  components: {
    Pager,
    Empty,
  },
  data() {
    return {
      isLoading: false,
      data: {
        total: 0,
        rows: [],
      },
      visibleNumber: 10,
    };
  },
  watch: {
    async $route(nv, ov) {
      console.log(nv === ov);
      this.isLoading = true;
      this.$refs.container.scrollTop = 0;
      this.data = await getBlogs(
        this.routeInfo.page,
        this.routeInfo.limit,
        this.routeInfo.categoryId
      );
      this.isLoading = false;
    },
  },
  computed: {
    routeInfo() {
      return {
        page: +this.$route.query.page || 1,
        limit: +this.$route.query.limit || 10,
        categoryId: this.$route.params.categoryId || -1,
      };
    },
  },
  async created() {
    this.$bus.$on("setMainScroll", this.handleSetMainScroll);
    this.isLoading = true;
    this.data = await getBlogs(
      this.routeInfo.page,
      this.routeInfo.limit,
      this.routeInfo.categoryId
    );
    this.isLoading = false;
  },
  destroyed() {
    this.$bus.$off("setMainScroll", this.handleSetMainScroll);
    this.$bus.$emit("mainScroll", null);
  },
  methods: {
    formatDate,
    handlePageChange(newPage) {
      const query = {
        page: newPage,
        limit: this.routeInfo.limit,
      };
      if (this.routeInfo.categoryId === -1) {
        this.$router.push({
          name: "blog",
          query,
        });
      } else {
        this.$router.push({
          name: "blogCategory",
          query,
          params: {
            categoryId: this.routeInfo.categoryId,
          },
        });
      }
    },
    handleScroll(e) {
      this.$bus.$emit("mainScroll", e.target);
    },
    handleSetMainScroll(scrollTop) {
      this.$refs.container.scrollTop = scrollTop;
    },
  },
};
</script>

<style scoped lang="less">
@import "../styles/color.less";

.blog-list-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  scroll-behavior: smooth;
  .blog-box > li {
    line-height: 1.7;
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #b4b8bc;
    min-width: 400px;
    .thumb {
      margin-right: 15px;
      img {
        display: block;
        max-width: 200px;
        border-radius: 5px;
      }
    }
    .main {
      .title {
        line-height: 1.7;
      }
      .aside {
        color: @gray;
        font-size: 12px;
        span {
          margin-right: 15px;
        }
      }
      .content {
        margin: 15px 0;
        font-size: 14px;
      }
    }
  }
}
</style>